<template>
  <div class="MyTableColumnSet el-button">
    <el-tooltip class="item" effect="dark" content="自定义列表字段" placement="top">
      <el-button class="table-btn" icon="el-icon-setting" size="small"  @click="dialogVisible=true"></el-button>
    </el-tooltip>
    <el-dialog
      title="自定义列"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      v-dialogDrag
      width="640px">
      <div>
       <!-- <div class="alert">勾选你想要在当前页面展示的列，以后将按照您的勾选默认展示。</div> -->
        <div class="row" >
          <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="item in tableColumn" :label="item.value" :key="item.value" >{{item.name}}</el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="handleSureTableColumn()"  size="small" v-loading="loading">确 定</el-button>
      </span>
    </el-dialog>
  </div>


</template>

<script>
  import { getCallRecord } from '@/api/getData'
 export default {
   name: 'MyTableColumnSet',
   props: ['tableColumn','hideTableColumn','tableColumnType'],
   data(){
     return{
       loading:false,
       options:[],
       dialogVisible:false,
       selectVal:'',
       checkedCities:[]
     }
   },
   mounted() {
     let checkedCities = [];
     for(let i=0;i<this.tableColumn.length;i++){
       if(!this.hideTableColumn.includes(this.tableColumn[i].value)){
         checkedCities.push(this.tableColumn[i].value)
       }
     }
     this.checkedCities = checkedCities;
   },
   methods:{
     dataInfo(){
       this.$emit("updateVal",this.selectVal);
       this.$listeners['search'] && this.$emit('search');
     },
     handleCheckedCitiesChange(){
      console.log(this.checkedCities);
     },
     async handleSureTableColumn(){
        try {
           this.loading = true;
           let data = [];
           for(let i=0;i<this.tableColumn.length;i++){
              if(!this.checkedCities.includes(this.tableColumn[i].value)){
                data.push(this.tableColumn[i].value)
              }
           }
           let ajaxData = data.length?data.join(','):'';
           this.$emit('update:hideTableColumn', data);
           this.dialogVisible = false;
           // const result = await getCallRecord({hide:ajaxData,type:this.tableColumnType});
           // if (result.success == true) {
           //   this.$message.success(result.message);
           //   this.dialogVisible = false;

           // } else {
           //   this.$message.error(result.message);
           // }
           this.loading = false;
        } catch (err) {
          console.log(err)
        }
     }
   }
 }
</script>

<style lang="scss" scoped>
  .MyTableColumnSet{
    padding:0px;
    border:none;
  }
  .alert{
    width: 100%;
    height: 40px;
    background-color: #e5f0ff;
    border-radius: 2px;
    border: 1px solid #97c7ff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 12px;
    color: #003b80;
  }
  .row /deep/ .el-checkbox{
    width: 196px;
    margin-top: 14px;
    margin-right:0px;
    text-align: left;
  }
  .row /deep/ .el-checkbox-group{
    display: flex;
    flex-wrap: wrap;
  }
</style>
